<template>
	<view class="container">
		<app-tabs v-model="tabIndex" :tabs="tabs" :fixed="true" @change="tabChange"></app-tabs>
		<scroll-item ref="mescrollItem" v-for="(tab,index) in tabs" :i="index" :key="index" :index="tabIndex"></scroll-item>
		<!-- <scroll-item ref="mescrollItem0" :i="0" :index="tabIndex"></scroll-item>
		<scroll-item ref="mescrollItem1" :i="1" :index="tabIndex"></scroll-item> -->
	</view>
</template>

<script>
	import ScrollItem from "@/components/scroll-items/expenditrue-item.vue";
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import AppTabs from "@/components/app-tabs.vue";
	export default {
		mixins: [MescrollMoreMixin], // // 多个mescroll-body写在子组件时, 则使用mescroll-more.js补充子组件的页面生命周期
		components: {
			AppTabs,
			ScrollItem
		},
		data() {
			return {
				tabs: ['收益明细', '支出明细'],
				tabIndex: 0, // 当前tab下标
			}
		},
		onLoad() {
			//兼容H5下排序栏位置
			// #ifdef H5
			//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
		}
	}
</script>

<style lang="scss">
	page {
		// box-sizing: border-box;
		background-color: #FAFAFA;
	}

	// .top-warp{
	// 	z-index: 9990;
	// 	position: fixed;
	// 	top: --window-top; /* css变量 */
	// 	left: 0;
	// 	width: 100%;
	// 	height: 88upx;
	// 	background-color: white;
	// }
</style>
